<template>
	<div class="invite-box">
		<view class="center-box">
			<image class="logo" src="/static/logo.png"></image>
			<view class="title"><text>您还未登录!</text></view>
			<view class="content">请先登录再进行此操作</view>
			<view class="btn-group">
				<view class="btn-left" @click="closeModal">暂不登录</view>
				<view class="btn-right" @click="userLogin">立即登录</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getWxOpenId,
		getAccessToken,
		getUserInfo,
		registerUser
	} from "@/plugins/api/userApi.js"
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		computed: {
			...mapState('user', ['modalShow', 'loginState', 'userInfo', 'openId'])
		},
		methods: {
			...mapActions('user', ['closeModalAction', 'setOpenIdAction', 'setSessionKeyAction', 'setUserInfoAction']),
			// 关闭弹窗，暂不登录
			closeModal() {
				this.closeModalAction()
			},
			// 登录操作
			async userLogin() {
				let loginState = this.userInfo.wxOpenId ? true : await this.getUserData()
				// 未登录则获取openId登录，登录则获取用户信息更新，并且更新登录状态
				if (!loginState) {
					return new Promise((resolve, reject) => {
						try {
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {
									uni.showLoading({
										title: '登录中...'
									})
									// 获取微信openId
									try {
										getWxOpenId({
											code: loginRes.code
										}).then(async res => {
											this.setOpenIdAction(res.data.data.openId)
											this.setSessionKeyAction(res.data.data.sessionKey)
											
											// 获取用户信息，若用户存在则返回用户信息，不存在则进行注册登记
											getUserInfo({
												openId: this.openId
											}).then(async ures => {
												if (ures.data.status == 1) {
													// 用户不存在，需要注册
													registerUser({
														wxOpenId: this.openId
													}).then(async rres => {
														if (rres.data.status == 0) {
															resolve(await this.setUserInfoAction(ures.data.data))
															uni.hideLoading()
															// 跳转到个人信息页面
															this.closeModalAction()
															this.$navTo('/page_my/pages/my-info')
														} else {
															uni.hideLoading()
															uni.showModal({
																icon: 'none',
																title: rres.data.msg
															})
														}
													})
												} else {
													console.log('用户存在')
													// 用户存在
													resolve(await this.setUserInfoAction(ures.data.data))
													uni.hideLoading()
													// 跳转到个人信息页面
													this.closeModalAction()
													this.$navTo('/page_my/pages/my-info')
												}
											}).catch(err => {
												console.log(err)
											})
										})
									} catch (e) {
										console.log(e, 'truchat')
									}
								},
								fail: function(err) {
									reject(err)
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '授权失败，请重新授权'
									})
								}
							})
						} catch (e) {
							uni.showToast({
								icon: 'none',
								title: e
							})
						}
					})
				}
				this.closeModalAction()
			},
			getUserData() {
				getUserInfo({
					openId: this.openId
				}).then(async ures => {
					if (ures.data.status == 1) {
						// 用户不存在，需要注册
						return false
					} else {
						await this.setUserInfoAction(ures.data.data)
						uni.hideLoading()
						return true
					}
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.invite-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.center-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 622rpx;
			padding: 32rpx;
			border-radius: 16rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);

			.logo {
				position: absolute;
				top: -48rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 136rpx;
				height: 144rpx;
				border-radius: 100rpx;
			}

			.close {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				margin-top: 66rpx;
				text-align: center;
				color: rgba(0, 0, 0, 1);
				font-size: 36rpx;
				font-weight: 500;
				font-family: "PingFang SC";
				letter-spacing: 0.6rpx;

				text {
					font-size: 38rpx;
					letter-spacing: 0.6rpx;
					color: rgba(69, 108, 255, 1);
				}
			}

			.content {
				margin: 35rpx 0;
				text-align: center;
				font-size: 26rpx;
				font-family: "PingFang SC";
				letter-spacing: 0.6rpx;
				color: #343434;
			}

			.btn-group {
				display: flex;
				justify-content: center;
				padding: 0 16rpx;

				.btn-right {
					width: 526rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 16rpx;
					text-align: center;
					background: linear-gradient(-46.8deg, rgba(63, 101, 255, 1) 0%, rgba(97, 141, 255, 1) 100%);
					color: #fff;
				}

				.btn-left {
					margin-right: 26rpx;
					width: 500rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-bottom: 1rpx solid #618dff;
					text-align: center;
					color: #618dff;
				}
			}
		}
	}
</style>